<!--
  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
-->

<ng1-modal modal="modalInstance"
           type="classic"
           class="i-sdc-admin-add-category-modal modal-type-confirmation"
           header-translate="CREATE_CATEGORY_MODAL_HEADER"
           buttons="footerButtons"
           header-translate-values="{'modelType': '{{modelType}}' }"
           show-close-button="true"
           hide-background="false"
>

    <form novalidate class="w-sdc-form" name="forms.editForm">

            <div class="w-sdc-form-column">
                <div class="i-sdc-form-item"
                     data-ng-class="{error:(editForm.categoryName.$dirty && editForm.categoryName.$invalid)}">
                    <label class="i-sdc-form-label required" translate="CREATE_CATEGORY_MODAL_CATEGORY_NAME"
                           translate-values="{'modelType': '{{modelType}}' }"></label>
                    <input class="i-sdc-form-input"
                           data-ng-model="category.name"
                           data-ng-model-options="{ debounce: 200 }"
                           type="text"
                           name="categoryName"
                           required="required"
                           data-ng-minlength="3"
                           data-ng-pattern="namePattern"
                           maxlength="25"
                           autofocus />

                    <div class="input-error" data-ng-show="forms.editForm.categoryName.$dirty && forms.editForm.categoryName.$invalid">
                        <span ng-show="forms.editForm.categoryName.$error.required" translate="CREATE_CATEGORY_MODAL_REQUIRED" translate-values="{'modelType': '{{modelType}}' }"></span>
                        <span ng-show="forms.editForm.categoryName.$error.minlength" translate="CREATE_CATEGORY_MODAL_MINLENGTH" translate-values="{'minlength': '3', 'modelType': '{{modelType}}' }"></span>
                        <span ng-show="forms.editForm.categoryName.$error.pattern" translate="CREATE_CATEGORY_MODAL_PATTERN" translate-values="{'modelType': '{{modelType}}' }"></span>
                    </div>

                </div>

            </div>

        </form>

</ng1-modal>
